<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>作品集</title>
<link rel="stylesheet" type="text/css" href="/css/sjzp.css"/>
<script type="application/javascript" src="/js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="/js/jquery.roundabout-1.0.js"></script>
<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>
<script type="text/javascript">		
$(document).ready(function() { 
$('#featured-area ul').roundabout({
easing: 'easeOutInCirc',
duration: 600
});
});
</script> 
<style>
@media screen and (max-width: 1024px) {
   .imgItem{
		display: block;
		float:left;
		max-width:146px;
		margin: 0 0 20px 14px;	
   }
   #biao {
		position: absolute;
		top: 365px;
		left: 43%;
	}
	#lunbotu {
		max-width: 1180px;
		height: 430px;
		overflow: hidden;
		position: relative;
		margin: 100px auto;
	}
	#banner img {
		float: left;
		height: 409px;
	}
}
@media screen and (min-width: 1023px) and (max-width: 1025px) {
    #banner img {
		float: left;
		height: 427px;
	}
}
</style>
</head>

<body>
<!--导航栏-->
	<div class="header">
		<div class="menu">
			<div class="logo">
				<a href="../index.ftl"><img src="/img/logo.png" style="height: 28px;"></a>
			</div>
			<ul class="nav">
				<li><a href="/index">首页<span></span></a></li>
				<li><a href="/huihui/sjzp" starget="_self">设计作品<span></span></a></li>
				<li><a href="#">给我留言<span></span></a></li>
			</ul>
			<table class="clean_t"></table>
		</div>
	</div>
	<!--轮播图-->
	<div id="lunbotu">
	   <div id="banner"> 
			<img class="m" src="/img/banner/banner1.jpg"/> 
			<img class="m" src="/img/banner/banner2.jpg"/> 
			<img class="m" src="/img/banner/banner3.jpg"/> 
		</div>
	   <div id="biao">
			<ul>
			  <li class="biao_1"></li>
			  <li class="biao_1"></li>
			  <li class="biao_1"></li>
			</ul>
  		</div>
  	</div>
  	<!--作品集平面-->
   <div class="pm">
   		<img src="/img/zuo.svg"/>&nbsp;&nbsp;平面作品&nbsp;&nbsp;<img src="/img/you.svg"/>
   </div>
	<center><br><br><br>
		<div id="imgDefault">
			<img class="imgItem" data-src="/img/23/1.jpg" src="/img/23/1.jpg">
			<img class="imgItem" data-src="/img/23/2.jpg" src="/img/23/2.jpg">
			<img class="imgItem" data-src="/img/23/3.jpg" src="/img/23/3.jpg">
			<img class="imgItem" data-src="/img/23/4.jpg" src="/img/23/4.jpg">
			<img class="imgItem" data-src="/img/23/5.jpg" src="/img/23/5.jpg">
			<img class="imgItem" data-src="/img/23/6.jpg" src="/img/23/6.jpg">
			<img class="imgItem" data-src="/img/23/7.jpg" src="/img/23/7.jpg">
			<img class="imgItem" data-src="/img/23/8.jpg" src="/img/23/8.jpg">
			<img class="imgItem" data-src="/img/23/9.jpg" src="/img/23/9.jpg">
			<img class="imgItem" data-src="/img/23/10.jpg" src="/img/23/10.jpg">
			<img class="imgItem" data-src="/img/23/11.jpg" src="/img/23/11.jpg">
			<img class="imgItem" data-src="/img/23/12.jpg" src="/img/23/12.jpg">
			<table style="clear:both"></table>
		</div>
	</center>
	<!--网页作品集-->
	<div class="wy">
   		<img src="/img/zuo.svg"/>&nbsp;&nbsp;banner&nbsp;&nbsp;<img src="/img/you.svg"/>
   </div>
   
	<div id="featured-area"> 
		<ul> 
			<li>
				<a href="#">
					<img src="/img/pmbanner/1.jpg"/>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="/img/pmbanner/2.jpg"/>
				</a>
			</li>  
			<li>
				<a href="#">
					<img src="/img/pmbanner/3.jpg"/>
				</a>
			</li> 
			<li>
				<a href="#">
					<img src="/img/pmbanner/3.jpg"/>
				</a>
			</li>  
		</ul> 
	</div>
	<div style="text-align:center;clear:both"></div>
	<!--手机作品集-->
	<div class="h5">
   		<img src="/img/zuo.svg"/>移动端作品<img src="/img/you.svg"/>
   </div>

<script>
(function(){
    var LightBox = function(options){
        this.imgListParent = document.getElementById(options.imgListParent);   //图片列表的父元素
        this.imgItemClass = options.imgItemClass;   //图片的className
        this.idx = 0;  //图片的索引，初始值为0
        this.isShowPage = options.isShowPage || false;    //是否显示分页，默认不显示
		this.imgWith = options.width;
		this.imgHeight = options.height;
        this.init();
    };
    //初始化
    LightBox.prototype.init = function(){
        this.renderDOM();
        this.imgListClick();
        this.nextBtnClick();
        this.prevBtnClick();
        this.closeBtnClick();
    };
    //渲染弹窗
    LightBox.prototype.renderDOM = function(){
        var imgModule = document.createElement("div");
        imgModule.id = "imgModule";
		var width  = this.imgWith;
		var height = this.imgHeight;
		var left = ($("body").width() - width) / 2;

        var oHtml = "";
        oHtml += '<div class="mask"></div>';
        oHtml +=    '<div class="lightBox">';
        oHtml +=        '<div class="lightBoxContent" style="width:' + width +'px; height:' + height + 'px; left:'+ left + 'px;">';
        oHtml +=            '<img src="/img/loading.gif" alt="" id="imgLoader">';
        oHtml +=            '<img alt="" id="imgLight">';
        oHtml +=        '</div>';
        oHtml +=        '<span class="btn lightBoxSprite" id="lightBoxPrev"></span>';
        oHtml +=        '<span class="btn lightBoxSprite" id="lightBoxNext"></span>';
        oHtml +=        '<span class="closeBtn lightBoxSprite" id="closeBtn"></span>';
        oHtml +=        '<div class="lightBoxPagination" id="lightBoxPagination" ></div>';
        oHtml +=    '</div>';

        imgModule.innerHTML = oHtml;
        document.body.appendChild(imgModule);
    };
    //分页
    LightBox.prototype.pagination = function(idx){
        var imgList = this.getByClass(this.imgListParent, this.imgItemClass);
        var pagination = document.getElementById("lightBoxPagination");
        var page = "";

        for(var i = 0; i < imgList.length; i++){
            if(idx == i){
                page += '<span class="current"></span>';
            }else{
                page += '<span></span>';
            }            
        }
        if(this.isShowPage){
            pagination.innerHTML = page;
        }        
    };
    //点击图片弹出弹窗
    LightBox.prototype.imgListClick = function(){
        var imgList = this.getByClass(this.imgListParent, this.imgItemClass);
        var imgModule = document.getElementById("imgModule");
        var self = this;

        for(var i = 0; i < imgList.length; i++){
            imgList[i].index = i;

            imgList[i].onclick = function(){
                imgModule.style.display = "block";
                var src = this.getAttribute("data-src");
                self.idx = this.index;

                self.imgLoad(src);
                self.pagination(self.idx);
            }
        }
    };
    //上一张
    LightBox.prototype.prevBtnClick = function(){
        var prevBtn = document.getElementById("lightBoxPrev");
        var self = this;

        prevBtn.onclick = function(){
            var imgList = self.getByClass(self.imgListParent, self.imgItemClass);
            
            self.idx--;

            if(self.idx < 0){  
                self.idx = imgList.length - 1;  
            }

            var src = imgList[self.idx].getAttribute("data-src");
            self.imgLoad(src);
            self.pagination(self.idx);
        }
    };
    //下一张
    LightBox.prototype.nextBtnClick = function(){
        var nextBtn = document.getElementById("lightBoxNext");
        var self = this;
        
        nextBtn.onclick = function(){
            var imgList = self.getByClass(self.imgListParent, self.imgItemClass);

            self.idx++;            

            if(self.idx >= imgList.length){  
                self.idx = 0;  
            }

            var src = imgList[self.idx].getAttribute("data-src");
            self.imgLoad(src);
            self.pagination(self.idx);
        }
    };
    //图片预加载
    LightBox.prototype.imgLoad = function(src, callback){
        var imgLight = document.getElementById("imgLight");
        var loader = document.getElementById("imgLoader");
        loader.style.display = "block";
        // imgLight.src = "";

        var img = new Image();
        img.onload = function(){
            loader.style.display = "none";
            imgLight.src = src;
        };
        img.src = src;
    };
    //关闭弹窗
    LightBox.prototype.closeBtnClick = function(){
        var closeBtn = document.getElementById("closeBtn");
        var imgModule = document.getElementById("imgModule");
        
        closeBtn.onclick = function(){
            imgModule.style.display = "none"; 
        }
    };
    //封装获取元素函数
    LightBox.prototype.getByClass = function(oParent, oClass){
        var oEle = oParent.getElementsByTagName("*");
        var oResult = [];

        for(var i = 0; i < oEle.length; i++){
            if(oEle[i].className == oClass){
                oResult.push(oEle[i]);
            }
        }
        return oResult;
    };
    window.LightBox = LightBox;
})();
// 初始化平面作品
new LightBox({
    imgListParent: "imgDefault",
    imgItemClass: "imgItem",
    isShowPage: true,
	width:475,
	height:680
});
</script>


<!--轮播图js-->
<script type="text/javascript">
var totalwith = window.screen.width;
var tempWith = 1180;
if (totalwith < 1024) {
	tempWith = 980.922;
} else if (totalwith == 1024){
	tempWith = 1024.090;
}
var slid = document.getElementById("banner");
var imgwidth = document.getElementsByClassName("m");
var oli=document.getElementsByClassName("biao_1");
var i =0;
auto();
oli[0].style.cssText="background:#ff6700;color:#fff;";
function auto(){
	time = setInterval(function(){
		i++;
		if(i <= 2) {
			slid.style.left = slid.offsetLeft - tempWith + "px";
			oli[i].style.cssText="background:#ff6700;color:#fff;";
			oli[i-1].style.cssText="background:none;color:#000;";
		} else {
			slid.style.left ="0px";
			oli[2].style.cssText="background:none;color:#000;";
			oli[0].style.cssText="background:#ff6700;color:#fff;";
			i=0;
		}
	}, 3000)
}

for(var j=0;j<=2;j++){
	imgwidth[j].index=j;
	oli[j].index=j;
	oli[j].onmouseover=function(){
		this.style.cssText="background:#ff6700;color:#fff;"    
		this.onmouseout=function(){
			this.style.cssText="background:none;color:#000;"
		}
	}

	oli[j].onclick=function(){
		clearInterval(time);
		m=this.index;
		slid.style.left=-m*tempWith+"px";    
		i=m;
		auto();
	}
}
</script>
<a href="http://www.beian.miit.gov.cn">鄂ICP备19005823号</a>
</body>
</html>
